<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="txt"><span></span>
</body>
<script>

  // 字母
  // 数字
  // 特殊（非数字字母）

  // 任意一种，差
  // 任意两种，中
  // 任意三种，强

  var txt = document.querySelector(".txt");
  var span = document.querySelector(".txt+span");

  txt.oninput = function(){
    var str = this.value;
    // 判断，如果输入框为空，直接提示，并结束
    if(str.length === 0){
      span.innerHTML = "不允许为空";
      return;
    }
    // 准备记录，是否出现某种类型
    var a = 0;
    var b = 0;
    var c = 0;
    // 遍历整个字符串
    for(var i=0;i<str.length;i++){
      // 判断是否出现数字
      if( str[i] >= 0 && str[i] <= 9 && str[i] !== " " ){
        // console.log("出现数字了");
        a = 1;
      }
      // 判断是否出现字母
      if( str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z" ){
        b = 1;
      }
      // 判断是否出现特殊（非数字非字母）
      if( !(str[i] >= 0 && str[i] <= 9 && str[i] !== " ") && !(str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z") ){
        c = 1;
      }
    }
    // 将记录的结果加起来，根据和，判断出现了几种
    switch(a+b+c){
      case 1:span.innerHTML = "差";break
      case 2:span.innerHTML = "中";break;
      case 3:span.innerHTML = "强";break;
    }
  }


</script>
</html>